<template>
    <Header title="注册"></Header>
    <div class="register">
        <table>
            <tr>
                <td>用户名</td>
                <td>
                    <input class="user_name" v-model="user_name">
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" class="user_pwd" v-model="pwd">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button @click="register">注册</button>
                    <button @click="toLogin">去登录</button>
                </td>
            </tr>
        </table>
    </div>
</template>
<script setup lang="ts">
import {reactive,toRefs} from 'vue'
import Header from '@/components/Header.vue'
import {useRouter} from 'vue-router'

let data = reactive({
    username:'',
    pwd:''
})
    

    const{user_name,pwd} = {...toRefs(data)}

    function toLogin(){
        router.push('/login')
    }

    function register(){

        if(localStorage.userInfo){
            const u = JSON.parse(localStorage.userInfo)
            if(u['.user_name'] === user_name.value){
                alert('用户名已存在')
                return
            }
        }        
        const user = {user_name:user_name.value.password:pwd.value}
        localStorage.setItem('userInfo',JSON.stringify(user))
        alert('注册成功')
        router.push('/login')

    
    }

</script>